<div style="display:flex;">
    <div class="left" id="tabs1" >
    <ul class="nav nav-tabs nav-left flex-column" id="ul1" role="tablist">
        @foreach($pointNav as $onePointNav)
        <li class="nav-item">
            <a onclick="checkedAlias($(this))" id="{{ $onePointNav['alias'] }}" class=" nav-link {{ $onePointNav['active'] }}">{{ $onePointNav['name'] }}</a>
        </li>
        @endforeach
        <li class="nav-item pull-right header"></li>
    </ul>
  </div>

  <div class="right" style="width:89%;">
    <div class="filter-box shadow-0 card mb-0">
        
    {!! $grid->render() !!}
        
    </div>
  </div>
</div>
<script src="{{ admin_asset('echarts/echarts.min.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
    chartDom = '<div id="echart" class="echart" style="width:100%;height:30rem;display:none;">';
    dataTableObj = $('.table.custom-data-table');
    exportBtn = $('.top.d-block > .pull-right');
    topBlock = $('.top.d-block');
    dataTableObj.parent().append(chartDom);
    makeChartShow();

    chartXData = {!! $xData !!};
    chartSeriesData = {!! $series !!};
    chartLegendData = {!! $legend !!};
    initChart();
});

    function checkedAlias(obj){
        let objAlias = obj.attr('id');
        let checkeds = JSON.parse('{!! $checkeds !!}');

        //移除
        if (checkeds.includes(objAlias)) {
            let index = checkeds.indexOf(objAlias);
            checkeds.splice(index, 1);
        //选中
        } else {
            checkeds.push(objAlias);
        }

        if (checkeds) {
            var url = "{{ URL::asset('admin/dedusting/history') }}";
            url += '/' + '{{ $deviceId }}' + '/' + JSON.stringify(checkeds);
        } else {
            var url = "{{ URL::asset('admin/dedusting/history') }}";
            url += '/' + '{{ $deviceId }}';
        }

        var query = window.location.search.substring(1);
        if (query) {
            window.location.href = url + '?' + query;
        }else {
            window.location.href = url;
        }
        return;
    }
    
    function makeChartShow(){
        dataTableObj.hide();
        $('#echart').show();
        exportBtn.hide();
    }
    
    function initChart(){
        let  myCharts=document.getElementById('echart');
        myCharts.style.width=window.innerWidth*0.75+ 'px';
        var myChart = echarts.init(document.getElementById('echart'));
        var option;

        option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: chartLegendData
            },
            xAxis: {
                type: 'category',
                data: chartXData
            },
            yAxis: {
                type: 'value'
            },
            series: chartSeriesData,
            dataZoom: []
        };

        option && myChart.setOption(option);
    }
</script>
